<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
  </head>
  <body>
    <!-- 列表一般用于水平或者垂直导航栏以及页面多个相同类似项目的排列布局 -->
    <!-- 
      快捷输入法
      ol>li*5{选项$}
     -->
    <!-- 无序列表 -->
    <ul>
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
      <li>选项5</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
      <dt>自定义列表标题</dt>
      <dd>选项1</dd>
      <dd>选项2</dd>
      <dd>选项3</dd>
      <dd>选项4</dd>
    </dl>

    <!-- 列表可以嵌套使用 -->
    <ul>
      <li>
        奥迪
        <ul>
          <li>A4L</li>
          <li>A5</li>
          <li>A6</li>
          <li>A8</li>
        </ul>
      </li>
      <li>
        奔驰
        <ul>
          <li>C200</li>
          <li>E260</li>
          <li>S600</li>
        </ul>
      </li>
      <li>
        宝马
        <ul>
          <li>320Li</li>
          <li>530Li</li>
          <li>740Li</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
